<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../publics/jstl.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="${ctx}/resource/static/css/common.css" rel="stylesheet">
  <title>订单信息</title>
    <script>
        var jsCtx = '${ctx}';
    </script>
</head>
<body>
    <input id="startCityId" value="${startCityId}" type="hidden" />
    <input id="startCityName" value="${startCityName}" type="hidden" />
    <input id="startShopId" value="${startShopId}" type="hidden" />
    <input id="startShopName" value="${startShopName}" type="hidden" />
    <input id="startDate" value="${startDate}" type="hidden" />
    <input id="endCityId" value="${endCityId}" type="hidden" />
    <input id="endCityName" value="${endCityName}" type="hidden" />
    <input id="endShopId" value="${endShopId}" type="hidden" />
    <input id="endShopName" value="${endShopName}" type="hidden" />
    <input id="endDate" value="${endDate}" type="hidden" />
    <input id="carId" value="${carId}" type="hidden" />
    <input id="carName" value="${carName}" type="hidden" />
    <input id="carDescription" value="${carDescription}" type="hidden" />
    <input id="days" value="${days}" type="hidden" />
    <input id="price" value="${price}" type="hidden" />
    <input id="total" value="${total}" type="hidden" />
    <input id="totalSnapshot" value="${totalSnapshot}" type="hidden" />
  <div class="order">
    <div class="order-hd">
        <div class="car-item flex">
          <div class="car-item-cover text-right flex-1">
            <img src="${picUrl}">
          </div>
          <div class="car-item-hd flex-1">
            <div class="car-item-name">${carName}</div>
            <div class="car-item-type">${carDescription}</div>
          </div>
        </div>   
        <div class="order-stores flex">
          <div class="order-store flex-3-1">
            <div class="text-ellipse">${startCityName}</div>
            <div class="text-ellipse">${startShopName}</div>
            <div class="text-ellipse">${startDate}</div>
          </div>
          <div class="order-duration flex-3-1">
            <p>
              <span>${days}天</span>
            </p>
          </div>
          <div class="order-store flex-3-1">
            <div class="text-ellipse">${endCityName}</div>
            <div class="text-ellipse">${endShopName}</div>
            <div class="text-ellipse">${endDate}</div>
          </div>
        </div>
    </div>
    <div class="order-bd">
      <div class="order-bill text-center">
        <div class="order-money">￥ <span>${total}</span></div>
        <span class="round">门店现付价</span>
        <div class="order-info-tip" id="fee-detail">费用明细</div>
      </div>
      <%--<div class="order-info-group">--%>
        <%--<div class="order-info-item flex">--%>
          <%--<div class="flex-auto">车辆租赁费及门店服务费(门店现付价)</div>--%>
          <%--<div class="flex-auto text-right">￥178</div>--%>
        <%--</div>--%>
        <%--<div class="order-info-item flex">--%>
          <%--<div class="flex-auto">基本保险费</div>--%>
          <%--<div class="flex-auto text-right">￥90</div>--%>
        <%--</div> --%>
        <%--<div class="order-info-item flex">--%>
          <%--<div class="flex-auto">手续费</div>--%>
          <%--<div class="flex-auto text-right">￥40</div>--%>
        <%--</div>                    --%>
      <%--</div>--%>
      <%--<div class="order-info-group high-light">--%>
          <%--<div class="order-info-item flex" style="align-items: center">--%>
            <%--<div class="flex-auto">微信小程序 新用户首日首租(最高立减100元)</div>--%>
            <%--<div class="flex-auto text-right text-nowrap">&nbsp; -￥178</div>--%>
          <%--</div>--%>
        <%--</div>   --%>
        <%--<div class="order-info-group">--%>
          <%--<div class="order-info-item flex">--%>
            <%--<div class="flex-auto">违章押金(可退)</div>--%>
            <%--<div class="flex-auto text-right">￥2000</div>--%>
          <%--</div>--%>
          <%--<div class="order-info-item flex">--%>
            <%--<div class="flex-auto">预授权(可退)</div>--%>
            <%--<div class="flex-auto text-right">￥3000</div>--%>
          <%--</div> --%>
        <%--</div>--%>
        <div class="order-info-group">
          <div class="order-info-item flex" style="margin-right: 20px;">
            <div class="flex-auto">优惠券</div>
            <label class="flex-auto text-right">
              <select id="coupon" style="-webkit-appearance: none; border: none; background-color: white;">
                  <option value="0">请选择优惠券</option>
                  <c:forEach items="${couponList}" var="coupon">
                    <option value="${coupon.couponGuid}"
                            data-guid="${coupon.guid}"
                            data-subcount="1"
                            data-couponvalue="${coupon.couponValue}"
                            data-typename="${coupon.typeName}">${coupon.title}</option>
                </c:forEach>
              </select>
            </label>
            <div class="price-option-arrow flex-none iconfont icon-gengduo" style="margin-top: 2px;"></div>
          </div>
        </div>
        <div class="order-info-group">
            <div class="order-info-item flex" style="margin-right: 20px;">
                <div class="flex-auto">支付方式</div>
                <label class="flex-auto text-right">
                    <select id="payType" style="-webkit-appearance: none; border: none; background-color: white;">
                        <option value="0">微信支付</option>
                        <option value="1">储值支付</option>
                    </select>
                </label>
                <div class="price-option-arrow flex-none iconfont icon-gengduo" style="margin-top: 2px;"></div>
            </div>
        </div>
        <div class="order-info-tip">
          <div>温馨提示</div>
          <div>1.首次租车请使用<span>本人信用卡,本人二代有效身份证,本人有效地方驾驶证正副本</span></div>
          <div>2.本订单仅为客户租车预约登记，提交该订单后，客户需要到门店办理具体租车手续，具体权利义务以签署的合同为准</div>
          <div>3.为了您更好的用车请点击查看<a class="show-book-rule" href="javascript:void(0);">退改规则</a></div>
        </div>            
    </div>
    <div class="order-submit">
      <button type="button" class="btn btn-block order-submit-btn">立即支付</button>
    </div>
  </div>
  <div class="pop pop-close">
    <div class="pop-inner">
      <div class="pop-content">
          <div class="book-rule">
              <h3>一、普通车型退改规则</h3>
              <div class="ruleinfo">
                  <ul>
                      <li>
                          <p class="rule-lgbt">1、适用范围</p>
                          <ol style="color: #eb5c00;">
                              <li>a) 此规则仅限平日适用，春节、国庆等法定节假日请以具体公示的活动页为准；</li>
                              <li>b) 此规则仅限普通车型使用，高端车型请下拉查看具体规则。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">2、订单取消</p>
                          <ol>
                              <li>a) 预订取车时间前48小时外取消订单，预付订单金额将全额退款。</li>
                              <li>b) 预订取车时间前48小时内取消订单，一嗨将收取最低一日日租金作为违约金，剩余已预付的订单金额将全部退还给客户。</li>
                              <li>c）天气不可抗力（比如洪水、地震等自然灾害）导致用户取消订单，不扣除违约金。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">3、订单修改</p>
                          <ol>
                              <li>a) 订单支付完成后，允许修改订单信息；</li>
                              <li>b) 修改后订单金额可能发生变化，若修改后订单金额低于原来订单金额，差价将会在3-5个工作日原路径返还；若修改后订单金额高于原来订单金额，您可选择在线支付或取车时到店支付订单剩余金额。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">4、续租</p>
                          <p>取车后增加租期，视为续租，续租部分按照非预付优惠价计算。</p>
                      </li>
                  </ul>
              </div>
      
              <h3>二、高端车退改规则</h3>
              <div class="ruleinfo">
                  <ul>
                      <li>
                          <p class="rule-lgbt">1、订单取消</p>
                          <ol>
                              <li>a）若在取车前48-72小时取消，收取订单金额的15%作为违约金；</li>
                              <li>b）若在取车前24-48小时取消，收取订单金额的50%作为违约金；</li>
                              <li>c）若在取车前24小时内取消，收取订单金额100%作为违约金；</li>
                              <li>d）天气不可抗力（比如洪水、地震等自然灾害）导致用户取消订单，不扣除违约金。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">2、订单修改</p>
                          <p>订单支付完成后，允许修改订单信息：</p>
                          <ol>
                              <li>a）若在取车前48-72小时修改，收取订单金额的10%作为改签费；</li>
                              <li>b）若在取车前24-48小时修改，收取订单金额的25%作为改签费；</li>
                              <li>c）若在取车前24小时内修改，收取订单金额50%作为改签费；</li>
                              <li>d）天气不可抗力（比如洪水、地震等自然灾害）导致用户修改订单，不扣除改签费。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">3、提前还车</p>
                          <p>允许提前还车，但已预付的租金不退。</p>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
      <div class="pop-ft">我知道了</div>
    </div>
  </div>
  <form method="post" id="feeForm" name="feeForm" action="${ctx}/h5/home/fee">
      <input type="hidden" name="normalDays" value="${normalDays}"/>
      <input type="hidden" name="weekendDays" value="${weekendDays}"/>
      <input type="hidden" name="dayTotalPrice" value="${dayTotalPrice}"/>
      <input type="hidden" name="weekendTotalPrice" value="${weekendTotalPrice}"/>
      <input type="hidden" name="longTimeReduce" value="${longTimeReduce}"/>
      <input type="hidden" name="vipReduce" value="${vipReduce}"/>
      <input type="hidden" name="totalDays" value="${totalDays}"/>
      <input type="hidden" name="insurance" value="${insurance}"/>
      <input type="hidden" name="totalInsurance" value="${totalInsurance}"/>
      <input type="hidden" name="total" value="${total}"/>
  </form>
  <script src="${ctx}/resource/static/js/jquery.min.js"></script>
  <script src="${ctx}/resource/static/js/fastclick.js"></script>
  <script src="${ctx}/resource/static/js/user.js?v=3"></script>
  <script>
      $(function(){
          $('#fee-detail').click(function(){
              $('#feeForm').submit();
          })
      });
  </script>
</body>
</html>